<template>
    <div class="conatainer" v-loading="loadingPage">
        <div v-if="showPage">
            <div class="goods-list" v-if='list.length > 0'>
                <div class="goods-item-con" v-for="(item, index) in list" :key="index" @click="toGoodsDetail(item.goods_id)">
                    <small-goods-item :item="item"></small-goods-item>
                    <div class="check flex-center" :class="[item.is_checked ? 'check-act':'']" @click.stop='selectGoods(index)' v-if='isHandleFlag'>
                        <i class="el-icon-check" v-if="item.is_checked"></i>
                    </div>
                </div>
            </div>
            <div class="no-data-con" v-else>
                <no-data :noDataImg="noDataImg" v-if='pageType == 0'></no-data>
                <no-data v-else></no-data>
            </div>
        </div>
        <pagination-footer :total="total" :page.sync="page" :limit.sync="limits" @pagination="getList">
            <div class="flex">
                <div class="all-checked flex-center" v-if="isHandleFlag">
                    <p class="flex-center" @click='selectAll' :class="[allChecked ? 'act-style':'']">
                        <i class="el-icon-check" v-if='allChecked'></i>
                    </p>
                    <span @click='selectAll'>全选</span>
                    <span>|</span>
                    <span @click='cancelCoolect'>删除</span>
                </div>
                <div class="handle-btn flex-center" @click="handleGoods">{{ isHandleFlag ? '取消管理':'管理'}}</div>
            </div>
        </pagination-footer>
    </div>
</template>

<script>
import SmallGoodsItem from '@/components/SmallGoodsItem.vue'
import PaginationFooter from '@/components/PaginationFooter.vue'
import {
    userCollectList,
    userFootList,
    batchCancelUserCollect,
    batchCancelUserFoot
} from '../../api/user'
import NoData from '@/components/NoData.vue'
export default {
    props: {
        tabIndex: {
            type: Number,
            default: 0
        },
        // isHandleFlag: Boolean,
        // allChecked: Boolean
    },
    components: {
        SmallGoodsItem,
        PaginationFooter,
        NoData
    },
    data() {
        return {
            showPage: false,
            loadingPage: true,
            pageType: 0,
            page: 1,
            list: [],
            total: 0,
            limits: 10,
            selectGoodsIds: '',
            allChecked: false,
            isHandleFlag: false,
            noDataImg:require('../../assets/img/no-collect.png')
        }
    },
    watch: {
        $route() {
            this.initPageData()
        },
    },
    created() {
        this.initPageData()
    },
    methods: {
        getList() {
            console.log('this.pageType 2222', this.pageType)
            const that = this;
            const apiUrl = that.pageType == 0 ? userCollectList : userFootList;
            apiUrl({
                page: that.page,
                limits: that.limits
            }).then(res => {
                that.showPage = true;
                that.loadingPage = false;
                if (res.code == 0) {
                    res.data.data.forEach(v => {
                        v.is_checked = false;
                    })
                    that.isHandleFlag = false;
                    that.allChecked = false;
                    that.list = res.data.data;
                    that.total = res.data.total;
                }
            })
        },
        initPageData() {
            if (this.$route.path == '/user/collect') {
                this.pageType = 0
            } else {
                this.pageType = 1
            }
            this.showPage = false;
            this.loadingPage = true;
            console.log('this.pageType', this.pageType)
            this.list = [];
            this.page = 1;
            this.total = 0;
            this.getList()
        },
        handleGoods() {
            this.isHandleFlag = !this.isHandleFlag;
            console.log('isHandleFlag', this.isHandleFlag)
        },
        //全选
        selectAll() {
            if (this.allChecked) {
                this.allChecked = false;
                this.list.forEach(v => {
                    v.is_checked = false;
                })
            } else {
                this.allChecked = true;
                this.list.forEach(v => {
                    v.is_checked = true;
                })
            }
        },
        //选择商品
        selectGoods(index) {
            let list = this.list,
                allChecked = this.allChecked;
            if (list[index].is_checked) {
                list[index].is_checked = false;
                allChecked = false;
            } else {
                list[index].is_checked = true;
                allChecked = list.every(v => {
                    return v.is_checked === true
                })
            }
            this.list = list;
            this.allChecked = allChecked;
        },
        //获取选中商品
        getSelectGoods() {
            let selectGoodsList = this.list.filter(v => {
                return v.is_checked == true
            })
            const selectGoodsIdsArr = selectGoodsList.map(v => {
                return v.id
            })
            this.selectGoodsIds = selectGoodsIdsArr.join(',')
        },
        cancelCoolect() {
            const that = this;
            let submitApi, dataObj;
            that.getSelectGoods();
            if (!that.selectGoodsIds) {
                that.$message.error('还未选择商品');
                return;
            }
            if (that.pageType == 0) {
                submitApi = batchCancelUserCollect;
                dataObj = {
                    collect_ids: that.selectGoodsIds
                }
            } else {
                submitApi = batchCancelUserFoot;
                dataObj = {
                    foot_ids: that.selectGoodsIds
                }
            }
            submitApi(dataObj).then(res => {
                if (res.code == 0) {
                    that.$message.success(res.msg);
                    that.getList()
                }
            })
        },
        toGoodsDetail(id){
            const href = this.$router.resolve({
                path: `/goods_detail`,
                query: { goods_id: id },
            }).href;
            window.open(href, "_blank");
        },
    }
}
</script>

<style lang="scss" scoped>
$supplier-color: #30b30e;

.conatainer {
    width: 100%;
    padding-bottom: 130px;
}
.goods-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 20px;
    .goods-item-con {
        position: relative;
        .check {
            width: 20px;
            height: 20px;
            border: 1px solid #c0c4cc;
            background: #fff;
            border-radius: 100%;
            position: absolute;
            top: 12px;
            right: 12px;
            box-sizing: border-box;
            z-index: 22;
            i {
                font-size: 14px;
                color: #c0c4cc;
                font-weight: bold;
                line-height: 20px;
                text-align: center;
            }
        }
        .check-act {
            background: #fd802c;
            border: 0;
            i {
                color: #fff;
            }
        }
    }
}
.all-checked {
    font-weight: normal;
    margin-right: 28px;
    p {
        width: 16px;
        height: 16px;
        border: 2px solid #f4f4f5;
        border-radius: 4px;
        i {
            font-weight: bold;
            font-size: 14px;
            color: #fd802c;
        }
    }
    .act-style {
        border: 2px solid #fd802c;
    }
    span {
        font-size: 14px;
        padding-left: 10px;
        color: #333;
    }
}
.handle-btn {
    color: var(--main-color);
    font-size: 14px;
    // margin-left: 28px;
    text-align: center;
}
.no-data-con{
    margin-top:80px;
}
@media screen and (max-width: 1280px) {
    .goods-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 20px;
    }
}
</style>
